<template>
  <div class="circle_process">
    <div class="wrapper right">
      <div class="circle rightcircle" :style="{borderTop:'3px solid ' + color,borderRight: '3px solid ' + color,transform: 'rotate(' + rightcircleNum + 'deg)'}"></div>
    </div>
    <div class="circle_process_num" :style="{color:color}">
      {{max}}
    </div>
    <div class="wrapper left">
      <div class="circle leftcircle" id="leftcircle" :style="{borderLeft:'3px solid ' + color,borderBottom: '3px solid ' + color,transform: 'rotate(' + leftcircleNum + 'deg)'}"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'circleProcess',
    props: {
      max: {
        type: Number,
        default: 120
      },
      current: {
        type: Number,
        default: 47
      },
      color: {
        type: String,
        default: 'rgba(128, 202, 255, 1)'
      }
    },
    computed: {
      leftcircleNum () {
        return this.current >= this.max / 2 ? -135 + this.max / 10 * (this.current - this.max / 2) : -135
      },
      rightcircleNum () {
        return this.current <= this.max / 2 ? -135 + (this.max / 10) * this.current : 45
      }
    },
    mounted () {
      console.log(this.leftcircleNum, this.rightcircleNum)
    }
  }
</script>

<style scoped>
  .circle_process {
    position: relative;
    width: 39px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: aqua;
  }

  .circle_process .wrapper {
    width: 20px;
    height: 40px;
    position: absolute;
    top: 0;
    overflow: hidden;
  }

  .circle_process .right {
    right: 0;
  }

  .circle_process .left {
    left: 0;
  }

  .circle_process .circle {
    width: 32px;
    height: 32px;
    border: 4px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    transform: rotate(-135deg);
  }

  .circle_process .rightcircle {
    right: 0;
    transform: rotate(-70deg);
  }

  .circle_process .leftcircle {
    left: 0;
    transform: rotate(-135deg);
  }

  @keyframes circle_right {
    0% {
      -webkit-transform: rotate(-135deg);
    }

    50%,
    100% {
      -webkit-transform: rotate(45deg);
    }
  }

  @keyframes circle_left {
    0%,
    50% {
      -webkit-transform: rotate(-135deg);
    }

    100% {
      -webkit-transform: rotate(45deg);
    }
  }
</style>
